<template>
    <div class="big_div" style="display: block;">
        <!--头部-->
        <div class="top_panel ub" style="height: 1rem;background-image: url(static/image/user/my_center_bgi.png);">
            <div class="icon ub"
                 style="width: 0.6rem;border-radius: 0.6rem;margin: 0.2rem 0 0.2rem 0.12rem;background-repeat: no-repeat;background-size: 0.6rem 0.6rem;"
                 :style="backgroundImg"></div>
            <div class="user_info ub ub-f1 ub-ver">
                <div id="user_not_login" class="ub ub-ac"
                     style="margin-top: 0.38rem;margin-left:0.12rem;font-size: 0.18rem;color:#ffffff" @click="userLogin"
                     v-if="!ifLogin && hasHttp">点击登录
                </div>
                <div id="user_info1" class="ub ub-ac"
                     style="display: none;margin-top: 0.28rem;margin-left:0.12rem;font-size: 0.18rem;color:#ffffff"
                     v-show="ifLogin && hasHttp">{{user_info.user_name}}
                </div>
                <div id="user_info2" class="ub ub-ac"
                     style="display: none;margin-top: 0.06rem;margin-left:0.12rem;font-size:0.14rem;color:#ffffff;opacity: 0.6;"
                     v-show="ifLogin && hasHttp">{{user_info.phone}}<div style="margin-left: 135px;color: rgb(12, 10, 33)" @click="loginOut">[退出登录]</div>
                </div>
            </div>
        </div>
        <!--我的订单-->
        <div class="my_order" style="background: #ffffff;">
            <div class="ub ub-ac" style="border-bottom: 1px solid #e9ebee;">
                <div class="ulev1" style="padding: 0.16rem 0.2rem 0.16rem;color: #686872;">我的订单</div>
                <div class="ub-f1 ub ub-ac" style="padding: 0.16rem 0;" @click="order_status('')">
                    <div class="ulev1 ub ub-pe ub-f1 ub-ac order_status"
                         style="padding-right:0.16rem;line-height: 1;color:#96969c;">查看全部
                    </div>
                    <div
                        style="width: 0.08rem;height: 0.14rem;background-image: url(static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;margin-right: 0.16rem;"></div>
                </div>
            </div>
        </div>
        <!--4个主题内容-->
        <div class="ub main_cms" style="margin-bottom: 0.15rem;background: white;">
            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(1)">
                <div class="info_image" style="background-image: url(static/image/user/daizhifu.png);"></div>
                <div class="info_title">待支付</div>
            </div>
            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(2)">
                <div class="info_image" style="background-image: url(static/image/user/yizhifu.png);"></div>
                <div class="info_title">已支付</div>
            </div>
            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(3)">
                <div class="info_image" style="background-image: url(static/image/user/yiwancheng.png);"></div>
                <div class="info_title">已完成</div>
            </div>
            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(5)">
                <div class="info_image" style="background-image: url(static/image/user/yiquxiao.png);"></div>
                <div class="info_title">已取消</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {checkLogin, getUserInfo} from '../../service/httpService'
    import tool from '../../config/mUtil/tool'
    import date from '../../config/mUtil/dateUtil'
    import info from '../../config/info'
    import {Toast} from 'mint-ui';
    import {Switch, MessageBox} from 'mint-ui';

    export default {
        name: "user_center",
        data() {
            return {
                ifLogin: false,
                hasHttp: false,
                user_info: '',
                backgroundImg: {
                }
            };
        },
        mounted() {
            this.load();
        },
        methods: {
            load() {
                checkLogin({
                    login: () => {
                        this.ifLogin = !this.ifLogin;
                        this.httpBaseInfo();
                    }, unlogin: () => {
                        this.hasHttp = true;
                        this.ifLogin = false;
                        this.backgroundImg = {
                            backgroundImage: `url(static/image/user/user_default_icon.png)`,
                        };
                    }
                })
            },
            httpBaseInfo() {
                getUserInfo().then(res => {
                    this.hasHttp = true;
                    if (res.flag === false) {
                        if (res.code === info.codeNotLogin) {
                            MessageBox.alert('未登录', '提示').then(e => {
                                tool.$router.push(this, {
                                    name: 'home'
                                })
                            })
                        } else {
                            MessageBox.alert(res.msg);
                        }
                    } else {
                        let data = res.data;
                        this.user_info = data.user_info;
                        if (this.user_info.head_img != '') {
                            this.backgroundImg = {
                                backgroundImage: `url(${this.user_info.head_img})`,
                            };
                        }else{
                            this.backgroundImg = {
                                backgroundImage: `url(static/image/user/user_default_icon.png)`,
                            };
                        }
                    }
                })
            },
            userLogin() {
                tool.$router.push(this, {
                    name: 'login',
                    query: {
                        routerName: 'user_center'
                    }
                })
            },
            order_status(index) {
                if (this.ifLogin === true) {
                    tool.$router.push(this, {
                        name: 'order_list',
                        query: {
                            order_status: index,
                        }
                    })
                }
            },
            loginOut(){
                tool.setCookie('access_token','',"s30")
                this.userLogin();
            },
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    @import "../../style/mixin";
    @import "../../../static/css/ui-base.css";
    @import "../../../static/css/travel_book.css";

    .info_image {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 0.16rem;
        height: 0.12rem;
        margin-bottom: 0.12rem;
        margin-top: 0.23rem;
    }

    .info_title {
        margin-bottom: 0.22rem;
        font-size: 0.14rem;
        color: #686872;
    }

    .one {
        padding-top: 0.16rem;
        padding-bottom: 0.16rem;
        border-bottom: 1px solid #e9ebee;
    }

</style>
